<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>写博客页面</title>
    <link th:href="@{/background/plugin/layui/css/layui.css}" href="../../static/background/plugin/layui/css/layui.css" rel="stylesheet" />

    <style>
        .layui-form-selected dl{
            z-index: 1000;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
    <legend>编写博客</legend>
</fieldset>

<form class="layui-form" action="/admin/addBlog" method="post" >
    <div class="layui-form-item">
        <label class="layui-form-label">博客标题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" th:value="${blog}==null?'':${blog.title}"/>
            <input type="hidden" name="id" th:value="${blog}==null?'':${blog.id}"/>
        </div>
        <label class="layui-form-label">博文作者</label>
        <div class="layui-input-inline">
            <input type="text" name="author" lay-verify="required" autocomplete="off"  class="layui-input" th:value="${blog}==null?'':${blog.author}">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">推荐博文</label>
        <div class="layui-input-inline">
            <div th:switch="${blog}==null? ${false}:${blog.is_Recommend}">
                <span th:case="${false}">
                    <input type="radio" name="is_Recommend" value=true title="是"  >
                    <input type="radio" name="is_Recommend" value=false title="否" checked >
                </span>
                <span th:case="${true}">
                    <input type="radio" name="is_Recommend" value=true title="是"  checked>
                    <input type="radio" name="is_Recommend" value=false title="否"  >
                </span>
            </div>
        </div>
        <label class="layui-form-label">添加封面</label>
        <div class="layui-input-inline">
            <input type="file" name="file" class="layui-upload-file" lay-title="添加一个碉堡了的图片">
            <input type="hidden" name="coverImageName" id="coverImageName" lay-verify="required"  th:value="${blog}==null?'':${blog.coverImageName}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属类别</label>
        <div class="layui-input-inline">
            <select lay-verify="required" name="blogTypeId" >
                <option value=""></option>
                <option value="1"  th:each="blogType:${blogTypeList}" th:selected="${blog}==null?false:(${blog.blogTypeId}==${blogType.id}?true:false)" th:value="${blogType.id}" th:text="${blogType.typeName}">类别1</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" type="button" onclick="layui.datalist.addTypeData()">
                <i class="layui-icon">&#xe608;</i> 添加类别
            </button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所属标签</label>
        <div class="layui-input-inline">
            <select  lay-verify="required"name="blogTagId" >
                <option value=""></option>
                <option value="1"  th:each="blogTag:${blogTagList}" th:selected="${blog}==null?false:(${blog.blogTagId}==${blogTag.id}?true:false)" th:value="${blogTag.id}" th:text="${blogTag.tagName}">类别1</option>
            </select>
        </div>
            <button class="layui-btn" type="button"  onclick="layui.datalist.addTagData()">
                <i class="layui-icon">&#xe608;</i> 添加标签
            </button>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">博文摘要</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" name="summary" lay-verify="required" style='width:99%;' class="layui-textarea" th:text="${blog}==null?'':${blog.summary}"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">编辑博文</label>
        <input type="hidden" name="content" id="content">
        <input type="hidden" name="publishTime" id="publishTime">
        <div class="layui-input-block">
        <script id="editor" type="text/plain" style='width:99%;height:300px;' th:utext="${blog}==null?'':(${blog.content}==null?'':${blog.content})"></script></div>
        </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="submit"  lay-submit="" lay-filter="submitBlog">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- layui.js -->
<script th:src="@{/background/plugin/ueditor/ueditor.config.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/background/plugin/ueditor/ueditor.all.js}" type="text/javascript" charset="utf-8"> </script>
<script th:src="@{/background/plugin/ueditor/lang/zh-cn/zh-cn.js}" type="text/javascript" charset="utf-8" ></script>
<script th:src="@{/background/plugin/layui/layui.js}" src="../../static/background/plugin/layui/layui.js"></script>
<script th:inline="javascript" type="text/javascript">
    //实例化编辑器
    var ue = UE.getEditor('editor');

    layui.define(['form','upload','layer'], function(exports){
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form();
        form.on('submit(submitBlog)', function(data){
            var content = ue.getContent();
            document.getElementById("content").value=content;
            document.getElementById("publishTime").value=new Date();
            return true;
        });
        layui.upload({
            url: '/admin/uploadImage' //上传接口
            ,success: function(result){ //上传成功后的回调
                if(result.success=='true'){
                    document.getElementById("coverImageName").value=result.coverImageName;
                }else{
                    alert("上传文件失败");
                }
            }
        });
        //输出接口，主要是两个函数，一个删除一个编辑
        var datalist = {
            editData: function (id,content) {
                var html='';
                html+='<form class="layui-form layui-form-pane" action="/admin/comment/reply" method="post">';
                html+='<label class="layui-form-label" style="border: none" >评论内容:</label>';
                html+='<textarea  style="width:87%;margin: auto;color: #000!important;"  readonly="true" class="layui-textarea layui-disabled" >'+content+'</textarea>';
                html+='<label class="layui-form-label" style="border: none">回复内容:</label>';
                html+='<textarea placeholder="请输入回复内容" name="content" lay-verify="required" style="width:87%;margin: auto" class="layui-textarea " ></textarea>';
                html+='<input type="hidden" name="commentId" value="'+id+'"/>';
                html+='<div class="layui-form-item">';
                html+='<div class="layui-input-inline" style="margin:10px auto 0 auto;display: block;float: none;">';
                html+='<button class="layui-btn" id="submit"  lay-submit="" lay-filter="demo1">立即提交</button>';
                html+='<button type="reset" class="layui-btn layui-btn-primary">重置</button>';
                html+='</div>';
                html+='</div>';
                html+='</form>';

                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: '420px', //宽高
                    title:'回复评论',
                    content: html
                });
            },
            addTagData:function () {
                var html='';
                html+='<form class="layui-form layui-form-pane" action="/admin/blogTag" method="post">';
                html+='<label class="layui-form-label" style="border: none" name="content" >标签名称:</label>';
                html+='<input  style="width:87%;margin: auto;color: #000!important;" name="tagName"  class="layui-input" >';
                html+='<div class="layui-form-item">';
                html+='<div class="layui-input-inline" style="margin:10px auto 0 auto;display: block;float: none;">';
                html+='<button class="layui-btn" id="submit"  lay-submit="" lay-filter="callback">添加</button>';
                html+='<button type="reset" class="layui-btn layui-btn-primary">重置</button>';
                html+='</div>';
                html+='</div>';
                html+='</form>';
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: '420px', //宽高
                    title:'添加标签',
                    content: html
                });
            },
            addTypeData:function () {
                var html='';
                html+='<form class="layui-form layui-form-pane" action="/admin/blogType" method="post">';
                html+='<label class="layui-form-label" style="border: none" name="content" >类别名称:</label>';
                html+='<input  style="width:87%;margin: auto;color: #000!important;" name="typeName"  class="layui-input" >';
                html+='<div class="layui-form-item">';
                html+='<div class="layui-input-inline" style="margin:10px auto 0 auto;display: block;float: none;">';
                html+='<button class="layui-btn" id="submit"  lay-submit="" lay-filter="callback">添加</button>';
                html+='<button type="reset" class="layui-btn layui-btn-primary">重置</button>';
                html+='</div>';
                html+='</div>';
                html+='</form>';
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: '420px', //宽高
                    title:'添加类别',
                    content: html
                });
            }
        };


        exports('datalist', datalist);
    });



</script>
</body>
</html>